<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GroupSummary.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/DateFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript" src="../../scripts/selectPantone.js">
        </script>
		<script type="text/javascript" src="../../scripts/selectDzColor.js">
        </script>
        <script type="text/javascript">
            var orderMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.order');
			var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
			var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			var yarnMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.yarn');
			var colorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
			
			var ctYesnoXmlLoader = new i18nMessage('../../servlet/CodeTableServlet?name=CtYesno');
			var ctSeasonNumberXmlLoader = new i18nMessage('../../servlet/CodeTableServlet?name=CtSeasonNumber');
			
			var store;
            var grid;
            
            var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: '../../servlet/OrderYarnServlet?action=2&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                store.reload();
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                            }
                            else {
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                            }
                        },
                        failure: function(o){
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
            
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                store = new Ext.data.Store({
                    url: '../../servlet/OrderYarnServlet?action=4',
                    
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'index', 'reference', 'ctSeasonNumber','launchDate', 'confirmedDate', 'lotQuantity', 'quantity','orderQuantity',
                    {
                    	name: 'biDZColor.dzColorCode', 
                    	mapping: 'dzColorCode'
                    },
                    'isConfirmed', 'comment', 'photo1Name','photo2Name','ctDesignType',
                    'customerName', 'customerDepartment', 'customerColorCode',
                    'factoryNameCN','factoryNameEN', 'supplierNumber', 'pantoneNumber','realColor',
                    'yarnReference', 'ctYarnMeasure', 'yarnAccount',
                    'ctYarnMaterial1', 'ctYarnMaterial2', 'ctYarnMaterial3', 'ctYarnMaterial4', 'ctYarnMaterial5',
                    'remark', 'id']),
                    
                    remoteSort: true
                });
                
                store.setDefaultSort('id', 'desc');
                
                var filters = new Ext.grid.GridFilters({
					  filters:[
					    {type: 'string',  dataIndex: 'reference'},
						{type: 'string', dataIndex: 'biDZColor.dzColorCode'},
						{type: 'list',  dataIndex: 'ctSeasonNumber', options: ctSeasonNumberXmlLoader.getCtArray() },
						{type: 'list',  dataIndex: 'isConfirmed', options: ctYesnoXmlLoader.getCtArray() },
						{type: 'date', dataIndex: 'launchDate'},
						{type: 'date', dataIndex: 'confirmedDate'}
				]});
				
				var expander = new Ext.grid.RowExpander({
			        tpl : new Ext.XTemplate(
		        		'<p><b>' + orderMessage.get('ui.order.designtype') + ':</b>&nbsp;&nbsp; {ctDesignType}&nbsp;&nbsp;&nbsp;&nbsp;<b></p>',
						'<br/><b>' + fcMessage.get('ui.francecustomer.name') + ':</b>&nbsp;&nbsp; {customerName}&nbsp;&nbsp;&nbsp;&nbsp;<b>' + fcMessage.get('ui.francecustomer.department') + ':</b>&nbsp;&nbsp; {customerDepartment}&nbsp;&nbsp;&nbsp;&nbsp;<b>' + dzColorMessage.get('ui.dzcolor.customercolorcode') + ':</b>&nbsp;&nbsp; {customerColorCode}</p>',
						'<br/><p><b>' + fMessage.get('ui.factory.name') + ':</b>&nbsp;&nbsp; {factoryNameCN}&nbsp;&nbsp;&nbsp;&nbsp;{factoryNameEN}&nbsp;&nbsp;&nbsp;&nbsp;<b>' + dzColorMessage.get('ui.dzcolor.factorycolorcode') + ':</b>&nbsp;&nbsp; {supplierNumber}</p>',
						'<br/><p><b>' + pantoneMessage.get('ui.pantonecolor.number') + ':</b>&nbsp;&nbsp; {pantoneNumber}&nbsp;&nbsp;&nbsp;&nbsp;<table width="60" style="background: #{realColor};position: absolute;"><tr height="15"><td>&nbsp;</td></tr></table></p>',
						'<br/><p><b>' + yarnMessage.get('ui.yarn.reference') + ':</b>&nbsp;&nbsp; {yarnReference}&nbsp;&nbsp;&nbsp;&nbsp;<b>' + yarnMessage.get('ui.yarn.composition') + ':</b>&nbsp;&nbsp; {ctYarnMaterial1}&nbsp;&nbsp; {ctYarnMaterial2}&nbsp;&nbsp; {ctYarnMaterial3}&nbsp;&nbsp; {ctYarnMaterial4}&nbsp;&nbsp; {ctYarnMaterial5}&nbsp;&nbsp;&nbsp;&nbsp;<b>' + yarnMessage.get('ui.yarn.yarnaccount') + ':</b>&nbsp;&nbsp;{ctYarnMeasure}&nbsp;{yarnAccount}</p>',
						'<br/><p><img src="../../_temp/{photo1Name}" width="150px"/> &nbsp;&nbsp;&nbsp;&nbsp;',
						'<img src="../../_temp/{photo2Name}" width="150px"/></p><br/>',
						'<br/><br/><p><b>' + message.get('message.edit.comment') + ':</b> {remark}</p><br/>'
			        )
			    });
			
				grid = new Ext.grid.GridPanel({
                    title: orderMessage.get('ui.order.listyarntitle'),
                    store: store,
					stripeRows: true,
					plugins: [filters,expander],
                    height: 560,
                    columns: [expander, {
                        header: message.get('message.list.id'),
                        width: 50,
                        dataIndex: 'index',
                        sortable: false
                    }, {
                        header: orderMessage.get('ui.order.reference'),
                        dataIndex: 'reference',
                        sortable: true
                    }, {
                        header: message.get('message.edit.seasonnumber'),
                        width: 50,
                        dataIndex: 'ctSeasonNumber',
                        sortable: true
                    }, {
                        header: orderMessage.get('ui.order.launchdate'),
                        width: 50,
                        dataIndex: 'launchDate',
                        sortable: true
                    }, {
                        header: orderMessage.get('ui.order.dzcolor'),
                        dataIndex: 'biDZColor.dzColorCode',
                        sortable: true
                    }, {
                        header: orderMessage.get('ui.order.orderquantity') + '(Kg)',
                        width: 50,
                        align: 'right',
                        dataIndex: 'orderQuantity',
                        renderer : renderStock
                    }, {
                        header: orderMessage.get('ui.order.logquantity'),
                        width: 50,
                        align: 'right',
                        dataIndex: 'lotQuantity'
                    }, {
                        header: orderMessage.get('ui.order.quantity') + '(Kg)',
                        width: 50,
                        align: 'right',
                        dataIndex: 'quantity',
                        renderer : renderStock
                    }, {
                        header: message.get('message.edit.alert'),
                        width: 50,
                        renderer : renderAlert
                    }, {
                        header: orderMessage.get('ui.order.isconfirmed'),
                        width: 50,
                        dataIndex: 'isConfirmed',
                        sortable: true,
                        renderer : renderIsYesno
                    }, {
                        header: orderMessage.get('ui.order.confirmeddate'),
                        width: 50,
                        dataIndex: 'confirmedDate',
                        sortable: true
                    },{
                        header: message.get('message.list.eidtitem'),
                        width: 30,
                        dataIndex: 'id',
                        sortable: false,
                        renderer: renderEditItem
                    },{
                        header: message.get('message.list.eidt'),
                        width: 30,
                        dataIndex: 'id',
                        sortable: false,
                        renderer: renderEdit
                    },{
                        header: message.get('message.list.delete'),
                        width: 30,
                        dataIndex: 'id',
                        sortable: false,
                        renderer: renderDelete
                    }],
                    viewConfig: {
                        forceFit: true
                    },
                    loadMask: true,
                    renderTo: 'orderYarnList',
                    bbar: new Ext.PagingToolbar({
                        pageSize: 20,
                        store: store,
                        displayInfo: true
                    })
                });
                
                var startPage = getPrarmeterValue(window.location, 'startPage');
                var start;
                if (startPage == null || startPage == '') {
                    start = 0;
                }
                else {
                    start = (startPage - 1) * 20;
                }
                store.load({
                    params: {
                        start: start,
                        limit: 20
                    }
                });
            });
            
            function renderIsYesno(value, p, record){
				if(value == '02')
					return String.format('<img src="../../images/icons/cross.png" />');
				else
					return String.format('<img src="../../images/icons/tick.png"/>');
            }
            
             function renderAlert(value, p, record){
             	var different = Math.abs(record.data.quantity - record.data.orderQuantity);
             	var co = different/record.data.orderQuantity;
             	if(co > 0.2){
             		return String.format('<img ext:qtip="{0}" src="../../images/icons/exclamation.png" />', orderMessage.get('ui.order.quantitydifferent') + '>20%');
             	}else{
             		return '';
             	}
            }
            
            function renderEditItem(value, p, record){
					if(record.data.lotQuantity == 0){
						return String.format('<a href="order_yarn_lot_edit.html?id={0}&startPage={1}" target="_self"><img src="../../images/icons/sitemap_color.png" title="' + message.get('message.list.eidt') + message.get('message.list.eidtitem') + '" /><img width="10" src="../../images/icons/cross.png"></a>', record.id, Math.floor((record.data.index - 1) / 20) + 1);
					}else{
						return String.format('<a href="order_yarn_lot_edit.html?id={0}&startPage={1}" target="_self"><img src="../../images/icons/sitemap_color.png" title="' + message.get('message.list.eidt') + message.get('message.list.eidtitem') + '" /><img width="10" src="../../images/icons/tick.png"></a>', record.id, Math.floor((record.data.index - 1) / 20) + 1);
					}
					
				}
            
            function renderEdit(value, p, record){
                return String.format('<a href="order_yarn_edit.html?id={0}&startPage={1}" target="_self"><img src="../../images/icons/pencil.png" title="' + message.get('message.list.eidt') + '" /></a>', record.id, Math.floor((record.data.index - 1) / 20) + 1);
            }
            
            function renderDelete(value, p, record){
                return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="' + message.get('message.list.delete') + '"/></a>', record.id);
            }
        </script>
    </head>
    <body>
        <div id="orderYarnList">
        </div>
    </body>
</html>